<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/common/taglibs.jsp" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>Web 权限管理</title>
	<%@ include file="/common/meta.jsp" %>
	<link href="${ctx}/css/style.css" type="text/css" rel="stylesheet"/>
	<link href="${ctx}/js/validate/jquery.validate.css" type="text/css" rel="stylesheet"/>
	<script src="${ctx}/js/jquery.js" type="text/javascript"></script>
	<script src="${ctx}/js/jquery.checktree.js" type="text/javascript"></script>
	<script src="${ctx}/js/validate/jquery.validate.js" type="text/javascript"></script>
	<script src="${ctx}/js/validate/messages_cn.js" type="text/javascript"></script>

	<script>
		$(document).ready(function() {
			//聚焦第一个输入框
			$("#name").focus();
			//为inputForm注册validate函数
			$("#inputForm").validate();
		});
		$(document).ready(function(){
			$("ul.tree").checkTree({
				/*
				// You can add callbacks to the expand, collapse, check, uncheck, and  halfcheck
				// events of the tree. The element you use as the argument is the LI element of
				// the object that fired the event.
				onExpand: function(el) {
					console.log("expanded ", el.find("label:first").text());
				},
				onCollapse: function(el) {
					console.log("collapsed ", el.find("label:first").text());
				},
				onCheck: function(el) {
					console.log("checked ", el.find("label:first").text());
				},
				onUnCheck: function(el) {
					console.log("un checked ", el.find("label:first").text());
				},
				onHalfCheck: function(el) {
					console.log("half checked ", el.find("label:first").text());
				}*/
				/*
				// You can set the labelAction variable to either "check" or "expand" 
				// to change what happens when you click on the label item.
				// The default is expand, which expands the tree. Check will toggle
				// the checked state of the items.
				labelAction: "expand"
				*/
				/*
				// You can also change what happens when you hover over a label (over and out)
				onLabelHoverOver: function(el) { alert("You hovered over " + el.text()); },
				onLabelHoverOut: function(el) { alert("You hovered out of " + el.text()); }
				*/
			});
		});
	</script>
	<link type="text/css" rel="stylesheet" href="${ctx}/css/checktree.css" />
</head>

<body style="margin-top:40px;">

<div id="content">
	<h1><img src="${ctx}/skin/images/frame/icon22.gif" align="absbottom"/>&nbsp;&nbsp;<s:if test="id == null">创建</s:if><s:else>修改</s:else>权限</h1>
	<form action="auth!save.action" method="post">
		<input type="hidden" name="id" value="${id}"/>
		<table width="99%" border="0" cellpadding="5" cellspacing="1" bgcolor="#e0e0e0" class="noborder">
			<tr>
				<td width="8%" height="24" align="left" bgcolor="#F5F5F5">编码:</td>
			  <td width="92%" bgcolor="#FFFFFF"><input type="text" id="name" name="name" size="40" value="${name}" class="required"/></td>
			</tr>
			<tr>
				<td height="24" align="left" bgcolor="#F5F5F5">名称:</td>
			  <td bgcolor="#FFFFFF"><input type="text" id="displayName" name="displayName" size="40" value="${displayName}" class="required"/></td>
			</tr>
			<tr>
				<td height="24" align="left" bgcolor="#F5F5F5">授权:</td>
				<td bgcolor="#FFFFFF">${doStr}</td>
			</tr>
			<tr>
				<td height="24" bgcolor="#F5F5F5"></td>
				<td bgcolor="#FFFFFF">
				${menuStr}				</td>
			</tr>
			<tr>
				<td height="30" colspan="2" align="center" bgcolor="#FFFFFF">
					<security:authorize ifAnyGranted="A_MODIFY_ROLE">
						<input class="button" type="submit" value="提交"/>&nbsp;
					</security:authorize>
			  <input class="button" type="button" value="返回" onclick="history.back()"/>			  </td>
			</tr>
	  </table>
	</form>
</div>

</body>
</html>